const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**
 * 1.设置打包入口和输出目录
 * 2.打包css文件，安装less-loader, css-loader, style-loader
 * less-loader: 将less文件转换为css文件
 * css-loader: 用于加载.css文件，将css转化为commonjs
 * style-loader: 将样式通过<style>标签插入到head中
 * use数组里面的解析过程是从最后一个开始执行
 * 3.打包vue文件，安装vue-loader,vue-template-compiler编译vue文件以函数的方式写入打包文件，此过程还需要引入'vue-loader/lib/plugin'
 * 4.打包图片文件，安装url_loader插件，如果要限制图片大小，还需要安装file_loader插件，比如限制图片大小为10k，当图片小于10k时，
 * 图片会以base64的形式写入打包文件，如果图片大于10K,则会打包到dist目录
 * 5.打包html文件，使用html-webpack-plugin插件,可在插件里面配置模板参数，设置模板路径
 */
module.exports = {
    mode: 'none',
    entry: path.join(__dirname, 'src/main.js'), //打包入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包输出目录
        filename: 'bundle_[hash].js'    //打包输出文件的名称
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [ 'babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.less|css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            },
            {
                test: /\.png|jpg$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            esModule: false,
                            name: '[name]_[hash].[ext]'
                        }
                    }
                ],
                
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: 'Vue Webpack Demo',
            base_url: process.env.NODE_ENV,
            template: './public/index.html'
        })
    ]
}